<template>
	<view class="main">
		<uv-sticky bgColor="#fff" ref="backTop" top="300">
			<view class="sv">
				<uv-subsection :list="list" activeColor="#2c9b94" mode="button" inactiveColor="#fff" bgColor="#2c9b94"
					custom-style="height: 60rpx;border-radius: 12rpx;" custom-item-style="border-radius: 12rpx;"
					:current="current" @change="change"></uv-subsection>
			</view>
		</uv-sticky>

		<view class="contV" v-if="current == 0">

			<view class="contVi" v-for="(i,o) in mainList" :key="o" @click.stop="openChildren(i)">
				<view class="docV" v-if="i.id">
					<img :style="{backgroundColor:i.img?'':'#eee'}"
						:src="i.img||'https://www.ysrs.xyz/apiI/ll/file/preview/1743090725920ff80808195d597d90195d84db4200013.png'" />
					<view class="docVt">
						<view class="docVt">{{i.name}}</view>
						<view class="docVtc">{{i.zhiwu||''}} {{i.zhicheng||''}}</view>
					</view>
					<view class="docVr">电话：{{i.phone}}</view>
				</view>
				<view class="docVb" v-else>
					<view class="docVbl">{{i.name}}</view>
					<view class="docVbr" v-if="i.children&&i.children.length"><uv-icon
							:name="i.show?'arrow-up-fill':'arrow-down-fill'" color="#ccc" size="16"></uv-icon>
					</view>
				</view>

				<!-- 第二层 -->
				<view class="contVi contVi1" v-for="(n,m) in i.children" :key="m" :style="{display:i.show?'block':'none'}"
					@click.stop="openChildren(n)">
					<view class="docV" v-if="n.id">
						<img :style="{backgroundColor:n.img?'':'#eee'}"
							:src="n.img||'https://www.ysrs.xyz/apiI/ll/file/preview/1743090725920ff80808195d597d90195d84db4200013.png'" />
						<view class="docVt">
							<view class="docVtn">{{n.name}}</view>
							<view class="docVtc">{{n.zhiwu||''}} {{n.zhicheng||''}}</view>
						</view>
						<view class="docVr">电话：{{n.phone}}</view>
					</view>
					<view class="docVb" v-else>
						<view class="docVbl">{{n.name}}</view>
						<view class="docVbr" v-if="n.children&&n.children.length"><uv-icon
								:name="n.show?'arrow-up-fill':'arrow-down-fill'" color="#ccc" size="16"></uv-icon>
						</view>
					</view>

					<!-- 第三层 -->
					<view class="contVi contVi1" v-for="(j,k) in n.children" :key="k" :style="{display:n.show?'block':'none'}"
						@click.stop="openChildren(j)">
						<view class="docV" v-if="j.id">
							<img :style="{backgroundColor:j.img?'':'#eee'}"
								:src="j.img||'https://www.ysrs.xyz/apiI/ll/file/preview/1743090725920ff80808195d597d90195d84db4200013.png'" />
							<view class="docVt">
								<view class="docVtn">{{j.name}}</view>
								<view class="docVtc">{{j.zhiwu||''}} {{j.zhicheng||''}}</view>
							</view>
							<view class="docVr">电话：{{j.phone}}</view>
						</view>
						<view class="docVb" v-else>
							<view class="docVbl">{{j.name}}</view>
							<view class="docVbr" v-if="j.children&&j.children.length"><uv-icon
									:name="j.show?'arrow-up-fill':'arrow-down-fill'" color="#ccc" size="16"></uv-icon>
							</view>
						</view>

						<!-- 第四层 -->
						<view class="contVi contVi1" v-for="(y,u) in j.children" :key="u" :style="{display:j.show?'block':'none'}"
							@click.stop="openChildren(y)">
							<view class="docV" v-if="y.id">
								<img :style="{backgroundColor:y.img?'':'#eee'}"
									:src="y.img||'https://www.ysrs.xyz/apiI/ll/file/preview/1743090725920ff80808195d597d90195d84db4200013.png'" />
								<view class="docVt">
									<view class="docVtn">{{y.name}}</view>
									<view class="docVtc">{{y.zhiwu||''}} {{y.zhicheng||''}}</view>
								</view>
								<view class="docVr">电话：{{y.phone}}</view>
							</view>
							<view class="docVb" v-else>
								<view class="docVbl">{{y.name}}</view>
								<view class="docVbr" v-if="y.children&&y.children.length"><uv-icon
										:name="y.show?'arrow-up-fill':'arrow-down-fill'" color="#ccc" size="16"></uv-icon>
								</view>
							</view>

							<!-- 第五层 -->
							<view class="contVi contVi1" v-for="(f,g) in y.children" :key="g" :style="{display:y.show?'block':'none'}"
								@click.stop="openChildren(f)">
								<view class="docV" v-if="f.id">
									<img :style="{backgroundColor:f.img?'':'#eee'}"
										:src="f.img||'https://www.ysrs.xyz/apiI/ll/file/preview/1743090725920ff80808195d597d90195d84db4200013.png'" />
									<view class="docVt">
										<view class="docVtn">{{f.name}}</view>
										<view class="docVtc">{{f.zhiwu||''}} {{f.zhicheng||''}}</view>
									</view>
									<view class="docVr">电话：{{f.phone}}</view>
								</view>
								<view class="docVb" v-else>
									<view class="docVbl">{{f.name}}</view>
									<view class="docVbr" v-if="f.children&&f.children.length"><uv-icon
											:name="f.show?'arrow-up-fill':'arrow-down-fill'" color="#ccc" size="16"></uv-icon>
									</view>
								</view>
							</view>

						</view>

					</view>

				</view>

			</view>

		</view>

		<view class="contV" v-else>
			<uv-index-list :index-list="indexList" customNavHeight="100rpx">
				<template v-for="(item, index) in mainList1">
					<uv-index-item>
						<view class="docV docVs" v-for="(i, o) in item" :key="o">
							<img :style="{backgroundColor:i.img?'':'#eee'}"
								:src="i.img||'https://www.ysrs.xyz/apiI/ll/file/preview/1743090725920ff80808195d597d90195d84db4200013.png'" />
							<view class="docVt">
								<view class="docVt">{{i.name}}</view>
								<view class="docVtc">{{i.zhiwu||''}} {{i.zhicheng||''}}</view>
							</view>
							<view class="docVr">电话：{{i.phone}}</view>
						</view>
					</uv-index-item>
				</template>
			</uv-index-list>
		</view>

		<uv-back-top :scroll-top="scrollTop" icon="arrow-up" :customStyle="customStyle"
			:iconStyle="iconStyle"></uv-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					backgroundColor: '#2c9b94',
				},
				iconStyle: {
					fontSize: '24rpx',
					color: '#fff',
				},
				scrollTop: 0,
				current: 0,
				list: ['按组织架构', '按姓名索引'],
				mainList: [],
				mainList1: [],
				indexList: [],
			}
		},
		mounted() {
			this.getMainData();
		},
		methods: {
			openChildren(item) {
				if (item.children && item.children.length) {
					item.show = !item.show
				}
			},
			change(index) {
				this.current = index;
			},
			getMainData() {
				this.mainList = [{
						show: false,
						name: '医务科',
						children: [{
								show: false,
								name: '张大师',
								zhicheng: '主任医师',
								age: 51,
								phone: 13322331122,
								id: 3,
								zhiwu: '科长',
								img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
							}, {
								show: false,
								name: '急诊科',
								children: [{
									show: false,
									name: '张大师',
									zhicheng: '主任医师',
									age: 51,
									phone: 13322331122,
									id: 3,
									zhiwu: '科长',
									img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
								}, {
									show: false,
									name: '120急救站',
									children: [{
										show: false,
										name: '张大师',
										zhicheng: '主任医师',
										age: 51,
										phone: 13322331122,
										id: 3,
										zhiwu: '科长',
										img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
									}, ]
								}, {
									show: false,
									name: '急诊内科'
								}, ]
							},
							{
								show: false,
								name: '重症医学科'
							},
							{
								show: false,
								name: '预防保健科'
							},
							{
								show: false,
								name: '健康教育科'
							},
							{
								show: false,
								name: '内一科',
								children: [{
									show: false,
									name: '心血管内科'
								}, {
									show: false,
									name: '呼吸内科'
								}, {
									show: false,
									name: '血液内科'
								}, ]
							},
							{
								show: false,
								name: '内二科',
								children: [{
									show: false,
									name: '神经内科'
								}, {
									show: false,
									name: '消化内科'
								}, {
									show: false,
									name: '内分泌'
								}, {
									show: false,
									name: '肾内科'
								}, ]
							},
							{
								show: false,
								name: '皮肤科'
							},
							{
								show: false,
								name: '眼耳鼻咽喉科'
							},
							{
								show: false,
								name: '感染性疾病科'
							},
							{
								show: false,
								name: '口腔科'
							},
							{
								show: false,
								name: '外一科',
								children: [{
									show: false,
									name: '骨科'
								}, {
									show: false,
									name: '神经外科',
									children: [{
										show: false,
										name: '张大师',
										zhicheng: '主任医师',
										age: 51,
										phone: 13322331122,
										id: 3,
										zhiwu: '科长',
										img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
									}, ]
								}, {
									show: false,
									name: '胸外科',
									children: [{
										show: false,
										name: '张大师',
										zhicheng: '主任医师',
										age: 51,
										phone: 13322331122,
										id: 3,
										zhiwu: '科长',
										img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
									}, ]
								}, ]
							},
							{
								show: false,
								name: '外二科',
								children: [{
									show: false,
									name: '普通外科',
									children: [{
										show: false,
										name: '张大师',
										zhicheng: '主任医师',
										age: 51,
										phone: 13322331122,
										id: 3,
										zhiwu: '科长',
										img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
									}, ]
								}, {
									show: false,
									name: '泌尿外科',
									children: [{
										show: false,
										name: '张大师',
										zhicheng: '主任医师',
										age: 51,
										phone: 13322331122,
										id: 3,
										zhiwu: '科长',
										img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
									}, ]
								}, ]
							},
							{
								show: false,
								name: '中医科',
								children: [{
									show: false,
									name: '张大师',
									zhicheng: '主任医师',
									age: 51,
									phone: 13322331122,
									id: 3,
									zhiwu: '科长',
									img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
								}, ]
							},
							{
								show: false,
								name: '麻醉科',
								children: [{
									show: false,
									name: '张大师',
									zhicheng: '主任医师',
									age: 51,
									phone: 13322331122,
									id: 3,
									zhiwu: '科长',
									img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
								}, ]
							},
							{
								show: false,
								name: '妇产科',
								children: [{
									show: false,
									name: '妇科',
									children: [{
										show: false,
										name: '张大师',
										zhicheng: '主任医师',
										age: 51,
										phone: 13322331122,
										id: 3,
										zhiwu: '科长',
										img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
									}, ]
								}, {
									show: false,
									name: '产科',
									children: [{
										show: false,
										name: '张大师',
										zhicheng: '主任医师',
										age: 51,
										phone: 13322331122,
										id: 3,
										zhiwu: '科长',
										img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
									}, ]
								}, {
									show: false,
									name: '计划生育'
								}, ]
							},
							{
								show: false,
								name: '儿科',
								children: [{
									show: false,
									name: '儿内科',
									children: [{
										show: false,
										name: '张大师',
										zhicheng: '主任医师',
										age: 51,
										phone: 13322331122,
										id: 3,
										zhiwu: '科长',
										img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
									}, ]
								}, {
									show: false,
									name: '新生儿',
									children: [{
										show: false,
										name: '张大师',
										zhicheng: '主任医师',
										age: 51,
										phone: 13322331122,
										id: 3,
										zhiwu: '科长',
										img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
									}, ]
								}, ]
							},
							{
								show: false,
								name: '病案室'
							},
							{
								show: false,
								name: '图书室'
							},
						]
					},
					{
						show: false,
						name: '物价检查'
					},
					{
						show: false,
						name: '门诊收费室'
					},
					{
						show: false,
						name: '住院部收费室'
					},
					{
						show: false,
						name: '总务科'
					},
					{
						show: false,
						name: '院办公室'
					},
					{
						show: false,
						name: '药剂'
					},
					{
						show: false,
						name: '护理部',
						children: [{
							show: false,
							name: '护理科'
						}, {
							show: false,
							name: '控感办'
						}, {
							show: false,
							name: '供应室'
						}, ]
					},
					{
						show: false,
						name: '医技科',
						children: [{
							show: false,
							name: '心电图室'
						}, {
							show: false,
							name: 'B超室'
						}, {
							show: false,
							name: '放射科'
						}, {
							show: false,
							name: '检验科'
						}, {
							show: false,
							name: '病理科'
						}, ]
					},
				]

				this.indexList = ["A", "B", "F", "G", "H", "P", "S", "Z"]
				this.mainList1 = [
					[{
						name: '安中伟',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}, {
						name: '安中伟1',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}, {
						name: '安中伟2',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}, {
						name: '安中伟3',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}, {
						name: '安中伟4',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}],
					[{
						name: '本中伟',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}],
					[{
						name: '冯中伟',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}, {
						name: '冯中伟1',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}, {
						name: '冯中伟2',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}, {
						name: '冯中伟3',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}, {
						name: '冯中伟4',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}],
					[{
						name: '宫中伟',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}],
					[{
						name: '宏中伟',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}],
					[{
						name: '彭中伟',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}, {
						name: '彭中伟1',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}, {
						name: '彭中伟2',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}, {
						name: '彭中伟3',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}, {
						name: '彭中伟4',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}],
					[{
						name: '宋中伟',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}, {
						name: '宋中伟1',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}, {
						name: '宋中伟2',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}, {
						name: '宋中伟3',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}],
					[{
						name: '宗中伟',
						zhicheng: '主任医师',
						phone: 13322331122,
						id: 3,
						zhiwu: '科长',
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					}],
				]
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 0 30rpx;

		.contV {
			margin-top: 20rpx;
		}

		.contVi {
			border-bottom: 1px solid #eee;

			&:last-of-type {
				border-bottom: 0;
			}


			.docVb {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80rpx;

				.docVbl {
					font-weight: bold;
				}
			}
		}

		.contVi1 {
			padding-left: 30rpx;
		}

	}

	.docV {
		display: flex;
		align-items: center;
		padding-bottom: 10rpx;

		img {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.docVt {
			margin-right: 30rpx;

			.docVtn {
				font-size: 33rpx;
			}

			.docVtc {
				font-size: 28rpx;
				color: #666;
			}
		}

		.docVr {
			font-size: 28rpx;
			color: #666;
		}
	}

	.docVs {
		border-bottom: 1px dashed #eee;
		margin-bottom: 10rpx;
		padding: 10rpx 0;
	}
</style>